<template>
  <view class="tv-area" :class="[`tv-area${_uid}`]">
    <slot></slot>
  </view>
</template>

<script>
  /**
   * tv-area 焦点区域
   * @description 定义焦点区域
   * @property { defaultIndex } 默认焦点
   * @property { triggerClick } 焦点移动后是否触发点击事件
   */
  import mixin from '../../mixin/mixin.js';

  export default {
    mixins: [mixin],
    props: {
      // 默认焦点
      defaultIndex: {
        type: Number,
        default: 0
      },
      // 焦点移动后是否触发点击事件
      triggerClick: {
        type: Boolean,
        default: false
      }
    },
    inject: ['tvProps'],
    provide() {
      return {
        areaUid: this._uid
      };
    },
    data: () => ({}),
    async mounted() {
      const rect = await this.$getRect(`.tv-area${this._uid}`);
      this.tvProps.tvFocus[this.tvProps.tvFocus.findIndex(v => v.uid === this._uid)].rect = Object.assign({}, rect, { uid: this._uid });
    },
    created() {
      this.tvProps.tvFocus.push({ uid: this._uid, index: this.defaultIndex, triggerClick: this.triggerClick, tvViews: [] });
    },
    destroyed() {
      this.tvProps.tvFocus.splice(this.tvProps.tvFocus.findIndex(v => v.uid === this._uid), 1);
    }
  };
</script>
